<template>
  <div class="p-8">
    <div class="max-w-6xl mx-auto space-y-8">
      <!-- 头部区域 -->
      <div class="flex items-center justify-between mb-8">
        <div>
          <h1 class="text-3xl font-bold text-gray-800">GP 内容</h1>
          <p class="mt-2 text-gray-600">选择以下功能模块，快速生成标准化的GP代码</p>
        </div>
      </div>

      <!-- 功能卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="(feature, index) in gpFeatures"
          :key="index"
          @click="router.push(feature.route)"
          class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] cursor-pointer border border-gray-100"
        >
          <div class="p-6">
            <!-- 图标和标题区 -->
            <div class="flex items-center mb-4">
              <div class="p-3 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
                <component :is="feature.icon" class="h-6 w-6 text-blue-600" />
              </div>
              <h3 class="text-lg font-semibold text-gray-800 ml-4 group-hover:text-blue-600">
                {{ feature.title }}
              </h3>
            </div>
            
            <!-- 描述文本 -->
            <p class="text-gray-600 text-sm leading-relaxed">{{ feature.description }}</p>
            
            <!-- 底部操作区 -->
            <div class="mt-4 flex items-center text-blue-600">
              <span class="text-sm font-medium">开始使用</span>
              <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  Code, 
  Search, 
  Files,
  FileText,
  Sun,
  Pen
} from 'lucide-vue-next'

const router = useRouter()

const gpFeatures = [
  { 
    title: "单据生成接口", 
    icon: Code, 
    description: "自动生成 Web Services 单据代码，支持自定义表格和字段配置，常用于生成相关作用单据", 
    route: "/gp/api"
  },
  { 
    title: "查询接口", 
    icon: Search, 
    description: "基于SQL配置自动生成查询接口代码", 
    route: "/gp/query"
  },
  { 
    title: "单档模块", 
    icon: FileText, 
    description: "生成单表维护的完整CRUD功能代码", 
    route: "/gp/single"
  },
  { 
    title: "双档模块", 
    icon: Files, 
    description: "生成主子表关联的完整业务功能代码", 
    route: "/gp/double"
  },
  { 
    title: "Q查询报表", 
    icon: Sun, 
    description: "生成查询报表代码，基于sql和表单配置，在基础框架上进行开发", 
    route: "/gp/report"
  },
  {
    title: "假双档",
    icon: Sun,
    description: "用于生成假双档代码，基于表单配置，表头查询条件录入",
    route: "/gp/fakedouble"
  },
  {
    title: "批处理",
    icon: Pen,
    description: "用于生成批处理代码，基于表单配置，以及查询条件录入，自动生成批处理",
    route: "/gp/batch"
  }
]
</script>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style> 